<ul class="nav nav-pills" role="tablist">
	<li role="presentation"><a href="#!/">Bridge Devices</a></li>
	<li role="presentation"><a href="#!/system">Bridge Control</a></li>
	<li role="presentation"><a href="#!/logs">Logs</a></li>
	<li ng-if="bridge.showVera" role="presentation"><a href="#!/veradevices">Vera Devices</a></li>
	<li ng-if="bridge.showVera" role="presentation"><a href="#!/verascenes">Vera Scenes</a></li>
	<li ng-if="bridge.showFibaro" role="presentation"><a href="#!/fibarodevices">Fibaro Devices</a></li>
	<li ng-if="bridge.showFibaro" role="presentation"><a href="#!/fibaroscenes">Fibaro Scenes</a></li>
	<li ng-if="bridge.showHarmony" role="presentation"><a href="#!/harmonyactivities">Harmony Activities</a></li>
	<li ng-if="bridge.showHarmony" role="presentation"><a href="#!/harmonydevices">Harmony Devices</a></li>
	<li ng-if="bridge.showNest" role="presentation"><a href="#!/nest">Nest</a></li>
	<li ng-if="bridge.showHue" role="presentation"><a href="#!/huedevices">Hue Devices</a></li>
	<li ng-if="bridge.showHal" role="presentation"><a href="#!/haldevices">HAL Devices</a></li>
	<li ng-if="bridge.showMqtt" role="presentation"><a href="#!/mqttmessages">MQTT Messages</a></li>
	<li ng-if="bridge.showHass" role="presentation"><a href="#!/hassdevices">HomeAssistant Devices</a></li>
	<li ng-if="bridge.showDomoticz" role="presentation"><a href="#!/domoticzdevices">Domoticz Devices</a></li>
	<li ng-if="bridge.showSomfy" role="presentation"><a href="#!/somfydevices">Somfy Devices</a></li>
	<li ng-if="bridge.showLifx" role="presentation"><a href="#!/lifxdevices">LIFX Devices</a></li>
	<li ng-if="bridge.showHomeWizard" role="presentation"><a href="#!/homewizarddevices">HomeWizard Devices</a></li>
	<li ng-if="bridge.showOpenHAB" role="presentation" class="active"><a href="#!/openhabdevices">OpenHAB Devices</a></li>
	<li ng-if="bridge.showFHEM" role="presentation"><a href="#!/fhemdevices">FHEM Devices</a></li>
	<li ng-if="bridge.showMozIot" role="presentation"><a href="#!/moziotdevices">Mozilla IOT Devices</a></li>
	<li ng-if="bridge.showBroadlink" role="presentation"><a href="#!/broadlinkdevices">Broadlink Devices</a></li>
	<li ng-if="bridge.showHomeGenie" role="presentation"><a href="#!/homegeniedevices">HomeGenie Devices</a></li>
	<li role="presentation"><a href="#!/editdevice">Add/Edit</a></li>
</ul>

<div class="panel panel-default">
	<div class="panel-heading">
		<h2 class="panel-title">OpenHAB Device List
			({{bridge.openhabdevices.length}})</h2>
	</div>
	<div class="panel-body">
		<p class="text-muted">For any OpenHAB Device, use the build action buttons
			to generate the item addition information into the ha-bridge device and this will put you into the edit screen. Then
			you can modify the name to anything you want that will be the keyword
			for the Echo or Google Home. Also, you can go back to any helper tab and click a build 
			action button to add another item for a multi-command. After you are
			 done in the edit tab, click the 'Add Bridge Device' to finish that selection
			setup. The 'Already Configured OpenHAB Devices' list below will show what
			is already setup for your OpenHAB.</p>
		<p class="text-muted">
			Also, use this select menu for which type of dim control you would
			like to be generated: <select name="device-dim-control"
				id="device-dim-control" ng-model="device_dim_control">
				<option value="">none</option>
				<option value="${intensity.byte}">Pass-thru Value</option>
				<option value="${intensity.percent}">Percentage</option>
				<option value="${intensity.decimal_percent}">Decimal Percentage</option>
				<option value="${intensity.math(X*1)}">Custom Math</option>
			</select>
		</p>
		<p class="text-muted">Use the check boxes by the names to use the bulk addition
			feature. Select your items and dim control type if wanted, then click
			bulk add below. Your items will be added with on and off or dim and
			off if selected with the name of the device from the OpenHAB.</p>
	<scrollable-table watch="bridge.openhabdevices">
	<table class="table table-bordered table-striped table-hover">
		<thead>
			<tr>
				<th>Row</th>
				<th sortable-header col="name">
					<span><input type="checkbox" name="selectAll"
					value="{{selectAll}}"
					ng-checked="selectAll"
					ng-click="toggleSelectAll()"> Name</span></th>
				<th sortable-header col="type">Type</th>
				<th sortable-header col="openhabname">OpenHAB</th>
				<th col="string-actions">On Actions</th>
				<th col="string-actions">Dim Actions</th>
				<th col="string-actions">Off Actions</th>
				<th col="string-actions">Color Actions</th>
				<th>Build Actions</th>
			</tr>
		</thead>
		<tr ng-if="openhabdevice.item.type !== 'String'" ng-repeat="openhabdevice in bridge.openhabdevices">
			<td>{{$index+1}}</td>
			<td><input type="checkbox" name="bulk.devices[]"
				value="{{openhabdevice.item.name}}"
				ng-checked="bulk.devices.indexOf(openhabdevice.item.name) > -1"
				ng-click="toggleSelection(openhabdevice.item.name)">
				{{openhabdevice.item.name}}</td>
			<td>{{openhabdevice.item.type}}</td>
			<td>{{openhabdevice.name}}</td>
				<td>
						On
				</td>
				<td>
						<div ng-if="openhabdevice.item.type === 'Dimmer'">Use Dim Control selection</div>
						<div ng-if="openhabdevice.item.type !== 'Dimmer'">Not Available</div>
				</td>
				<td>
						Off
				</td>
				<td>
						Not Available
				</td>
			<td>
				<button  class="btn btn-success" type="submit"
					ng-click="buildDeviceUrls(openhabdevice, device_dim_control, null, null, null, null, null, null, null, null, false)">Build Item</button>
			</td>
		</tr>
		<tr ng-if="openhabdevice.item.type === 'String'" ng-repeat="openhabdevice in bridge.openhabdevices">
			<td>{{$index+1}}</td>
			<td><input type="checkbox" name="bulk.devices[]"
				value="{{openhabdevice.item.name}}"
				ng-checked="bulk.devices.indexOf(openhabdevice.item.name) > -1"
				ng-click="toggleSelection(openhabdevice.item.name)">
				{{openhabdevice.item.name}}</td>
			<td>{{openhabdevice.item.type}}</td>
			<td>{{openhabdevice.name}}</td>
			<td>
				<select name="on-device-action" id="on-device-action" ng-model="onaction">
					<option value="">None</option>
					<option ng-repeat="option in openhabdevice.item.stateDescription.options"
						value="{{option.value}}">{{option.label}}</option>
					<option value="other">Other</option>
				</select>
				<input ng-if="onaction === 'other'" id="on-input-device-action"
					class="form-control" type="text"
					ng-model="ondata"
					placeholder="Type Action if Other">
			</td>
			<td>
				<select name="dim-device-action" id="dim-device-action" ng-model="dimaction">
					<option value="">None</option>
					<option ng-repeat="option in openhabdevice.item.stateDescription.options"
						value="{{option.value}}">{{option.label}}</option>
					<option value="other">Other</option>
				</select>
				<input ng-if="dimaction === 'other'" id="dim-input-device-action"
					class="form-control" type="text"
					ng-model="dimdata"
					placeholder="Type Action if Other">
			</td>
			<td>
				<select name="off-device-action" id="off-device-action" ng-model="offaction">
					<option value="">None</option>
					<option ng-repeat="option in openhabdevice.item.stateDescription.options"
						value="{{option.value}}">{{option.label}}</option>
					<option value="other">Other</option>
				</select>
				<input ng-if="offaction === 'other'" id="off-input-device-action"
					class="form-control" type="text"
					ng-model="offdata"
					placeholder="Type Action if Other">
			</td>
			<td>
				<select name="color-device-action" id="color-device-action" ng-model="coloraction">
					<option value="">None</option>
					<option ng-repeat="option in openhabdevice.item.stateDescription.options"
						value="{{option.value}}">{{option.label}}</option>
					<option value="other">Other</option>
				</select>
				<input ng-if="coloraction === 'other'"t id="color-input-device-action"
					class="form-control" type="text"
					ng-model="colordata"
					placeholder="Type Action if Other">
			</td>
			<td>
				<button  class="btn btn-success" type="submit"
					ng-click="buildDeviceUrls(openhabdevice, device_dim_control, onaction, ondata, dimaction, dimdata, offaction, offdata, coloraction, colordata, false)">Build Item</button>
			</td>
		</tr>
	</table>
	</scrollable-table>
	<div class="panel-footer">
		<button class="btn btn-success" type="submit"
			ng-click="bulkAddDevices(device_dim_control)">Bulk Add
			({{bulk.devices.length}})</button>
	</div>
	</div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">
		<h2 class="panel-title">
			Already Configured OpenHAB Devices <a ng-click="toggleButtons()"><span
				class={{imgButtonsUrl}} aria-hidden="true"></span></a></a>
		</h2>
	</div>
	<div ng-if="buttonsVisible" class="panel-body">
	
	<scrollable-table watch="bridge.openhabdevices">
	<table class="table table-bordered table-striped table-hover">
		<thead>
			<tr>
				<th>Row</th>
				<th sortable-header col="name">Name</th>
				<th sortable-header col="category">Category</th>
				<th sortable-header col="openhabname">OpenHAB</th>
				<th>Map Id</th>
				<th>Actions</th>
			</tr>
		</thead>
		<tr
			ng-repeat="device in bridge.devices | configuredOpenHABItems">
			<td>{{$index+1}}</td>
			<td>{{device.name}}</td>
			<td>{{device.deviceType}}</td>
			<td>{{device.targetDevice}}</td>
			<td>{{device.mapId}}</td>
			<td>
				<p>
					<button class="btn btn-warning" type="submit"
						ng-click="editDevice(device)">Edit</button>
					<button class="btn btn-danger" type="submit"
						ng-click="deleteDevice(device)">Delete</button>
				</p>
			</td>
		</tr>
	</table>
	</scrollable-table>
	</div>
</div>
<script type="text/ng-template" id="deleteMapandIdDialog">
		<div class="ngdialog-message">
			<h2>Device Map and Id?</h2>
				<p>{{mapandid.mapType}} with  {{mapandid.id}}</p>
				<p>Are you Sure?</p>
		</div>
		<div class="ngdialog-buttons mt">
			<button type="button" class="ngdialog-button ngdialog-button-error" ng-click="deleteMapandId(mapandid)">Delete</button>
		</div>
	</script>
